<template>
    <div class="dao" @click="gotowhere(path)">
        <el-progress 
            type="circle" 
            :stroke-width="strokeWidth" 
            :width="width" 
            :percentage="percentage" 
            :status="percentage==total?'success':''" >
            <template #default="{ percentage }"
        >
                <span class="percentage-value"> {{(allTimes - Math.floor(percentage/(total/allTimes))   )}} S</span>
            </template>
        </el-progress>
    </div>
</template>

<script lang="ts" setup>
import {useHookOne} from '../hooks/MyHookOne'
import {ref , Ref , onMounted  } from 'vue' 


const props = defineProps({   
    width:{
        type:Number,
        default:60,  
    },
    strokeWidth:{
        type:Number,
        default:3,
    },
    path:{
        type:String,
        default:'/login',
    },
    gotowhere:{
        type:Function,
        default(){

        }
    },
    speed:{   
        type:Number,
        default:5
    },
    interval:{  
        type:Number,
        default:250
    }
})
const total = 100;
const percentage: Ref<number>  = ref(0)   
let timer:any  = null;

let times = (total / props.speed)   
let allTimes = Math.floor(times * props.interval / 1000)   


const timeDown = ()=>{
    timer = setInterval(()=>{
        if(percentage.value<total){    
            percentage.value+=props.speed;
        }else{
            clearInterval(timer)
            timer = null
            props.gotowhere(props.path)
        }
    },props.interval)   
}

onMounted(()=>{
    timeDown()
})

</script>


<style lang="scss" scoped>
.dao{
    position: absolute;
    top:20px;
    right:20px;
    z-index:1000;
    ::v-deep .el-progress__text{
        color:#fff !important;
        font-size:16px;
    }
}
</style>